<template>
  <div class="home">
    <el-container :style="containerStyle">
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>
          一般按钮样式 <br>
          <el-button type="primary" plain @click="openShadow">跳转页面,弹出弹框</el-button>用于点击后页面跳转,弹出弹框等 这里点击可以有弹框弹出来
          <br>
          <el-button type="success" plain>确认信息</el-button>用于表单点击后确认信息
          <br>
          <el-button type="danger" plain>重置信息</el-button> 用于重置表单信息
          <br>
          <hr>
          下拉框,需要一个data字段,options,也可以通过size 调整大小:
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <br>
          <hr>
          分页,采用的是带有背景色的分页
          <el-pagination layout="prev, pager, next" :total="1000">
          </el-pagination>
          <hr>
          表格 按钮顺序为 查看按钮 编辑按钮 删除按钮
          <el-button type="primary" size="mini" icon="el-icon-search">搜索</el-button> 搜索按钮
          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="Date" prop="date">
            </el-table-column>
            <el-table-column label="Name" prop="name">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button-group>
                  <el-button @click="handleEdit(scope.$index, scope.row)" type="primary" size="mini" icon="el-icon-tickets"></el-button>
                  <el-button @click="handleEdit(scope.$index, scope.row)" type="success" size="mini" icon="el-icon-edit"></el-button>
                  <el-button @click="handleUpdata(scope.$index, scope.row)" type="success" size="mini" icon="el-icon-share"></el-button>
                  <el-button @click="handleDelete(scope.$index, scope.row)" type="danger" size="mini" icon="el-icon-delete"></el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {},
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      containerStyle: {
        height: ''
      }
    }
  },
  created () {
    this.containerStyle.height = window.innerHeight + 'px'
    // this.$axios({//测试,请求mock地址请求成功
    //   url: '/mock/42/stuDate',
    //   method: 'get'
    // }).then(res => {
    //   console.log(res)
    // }).catch(err => {
    //   console.log(err)
    // })
  },
  methods: {
    handleEdit (index, row) {
      console.log(index, row)
      const flag = parseInt(Math.random() * 10) % 2 === 0
      if (flag) {
        this.$message({
          type: 'success',
          message: '更新信息成功!'
        })
      } else {
        this.$message({
          type: 'error',
          message: '更新信息失败!'
        })
      }
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    handleUpdata (index, row) {
      console.log(index, row)
    },
    openShadow () {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // type: 'warning',
        center: true
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}

</script>
<style scoped lang="less">
.el-header {
  border-bottom: 10px solid white;
  box-sizing: border-box;
}

.el-aside {
  color: #333;
  text-align: center;
}

.el-main {
  background-color: rgba(255, 255, 255, 0.1);
  border-left: 10px solid white;
}

</style>
